<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>${initParam.WxAppName}</title>
		<link href="${pageContext.request.contextPath}/bettery/css/map.css" rel="stylesheet" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/dewei/js/jquery.js?v=1">
</script>
		<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=e4e68a5cf6df32793a5c7f00e7d17253">
</script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/bettery_common.js">
</script>
	</head>
	<body>
		<div id="preloader"></div>
		<form id='searchForm' action="queryChex.do" method="post">
			<input type="hidden" value="${model.lat}" name='model.lat' id="hiddenLat" />
			<input type="hidden" value="${model.lng}" name='model.lng' id="hiddenLng" />
			<input type="hidden" value="${model.blat}" name='model.blat' id="hiddenbLat" />
			<input type="hidden" value="${model.blng}" name='model.blng' id="hiddenbLng" />
			<input type="hidden" value="${model.mlat}" name='model.mlat' id="hiddenmLat" />
			<input type="hidden" value="${model.mlng}" name='model.mlng' id="hiddenmLng" />
			<input type="hidden" value="${model.chexingId}" name="model.chexingId" id="chexingId" />
			<input type="hidden" value="${model.chexingName}" name="model.chexingName" id="hiddenChexingName" />
			<!-- 下订单人所在的省市县 -->
			<input type="hidden" value="${model.province}" name='model.province' id="hiddenProvince" />
			<input type="hidden" value="${model.city}" name='model.city' id="hiddenCity" />
			<input type="hidden" value="${model.town}" name='model.town' id="hiddenTown" />
			<!-- 电池 -->
			<input type="hidden" value="${model.dianchiId}" name="model.dianchiId" id="dianchiId" />
			<input type="hidden" value="${model.price}" name='model.price' id="ourPrice" />
			<input type="hidden" value="${model.pinPai}" name='model.pinPai' id="pinPai" />
			<input type="hidden" value="${model.xingHao}" name='model.xingHao' id="xingHao" />
			<input type="hidden" value="${model.imageUrl}" name='model.imageUrl' id="imageUrl" />

			<input type="hidden" value="${model.zhongliang}" name='model.zhongliang' id="bettery_zhongliang" />
			<input type="hidden" value="${model.licheng}" name='model.licheng' id="bettery_licheng" />
			<input type="hidden" value="${model.detailInfo}" name='model.detailInfo' id="bettery_detailInfo" />
			<input type="hidden" value="${model.marketPrice}" name='model.marketPrice' id="bettery_marketPrice" />
			<!-- 1:门店，2：上门   更换类型-->
			<input type="hidden" name='model.changeType' value="" id="hiddenChangeType" />

			<!-- 门店地址 -->
			<input type="hidden" value="${model.mendianAddr}" name='model.mendianAddr' id="hiddenmendianAddr" />
			<input type="hidden" value="${model.mendianId}" name='model.mendianId' id="hiddenMendianId" />
			<!-- 门店联系电话 -->
			<input type="hidden" value="${model.menDianTel}" name='model.menDianTel' id="hiddenMenDianTel" />
			<input type="hidden" value="${model.mendianLxr}" name='model.mendianLxr' id="hiddenMendianLxr" />
			<input type="hidden" value="${model.mendianName}" name='model.mendianName' id="hiddenMendianName" />

			<!-- 客户地址 -->
			<input type="hidden" value="${model.address}" name='model.address' id="hiddenAddress" />
			<!-- 客户联系电话-->
			<input type="hidden" value="${model.lxTel}" name='model.lxTel' id="hiddenLxTel" />
			<input type="hidden" value="${model.time}" name='model.time' id="hiddenTime" />
			<input type="hidden" value="${model.kehuName}" name='model.kehuName' id="hiddenKehuName" />
			<input type="hidden" id="tsss">
			<div class="search_bar" align="center">
				附近的充电站网点
			</div>
			<div id='layer' style='display: block;' align="center">
				<div class="container" >
					<div class="content">
						<div class="ball"></div>
						<div class="ball1"></div>
					</div>
					<span style="color: #000" id="span_without_map"><div style="margin-top:100px;font-size:14px;">正在建设中...</div></span>
				</div>
			</div>
			<div id="map" style='display: none; height: 100%; background: #fff; margin-top: 0px; padding-bottom: -360px; position: absolute;'></div>
			<div id='daohangInfo' class="footor_bar" style=''>
				<a href="#" style="float: right; top: 0px; text-decoration: none;" onclick='javascript:$("#daohangInfo").hide();'>点击关闭</a>  
				<div id="result" style='height: 135px; color: #000; bottom: 0px;'></div>
			</div>
		</form>
		<script type="text/javascript">
var json;
var findMarkflag = true;
var map1;
var _lat;
var _lng;
var point;
var infowindows = new Array();
var infowindowFocus;
var point2;
var points = new Array();
var route_text, steps;
var polyline, extra_line1, extra_line2;
$(function()
{
	_lat = $("#hiddenbLat").val();
	_lng = $("#hiddenbLng").val();
	if (_lat && _lng)
	{
	$("#map").hide();
	loadMap();
	}
	else
	{
	$('.loading').css('display', 'inline-block');
	navigator.geolocation.getCurrentPosition(function(position)
	{
		_lat = position.coords.latitude;
		_lng = position.coords.longitude;
		$("#hiddenLng").val(_lng);
		$("#hiddenLat").val(_lat);
		getConvertLatLng(_lat, _lng);
	}, function(error)
	{
		$('#preloader').hide();
		switch (error.code)
		{
			case error.TIMEOUT :
				//alert("获取位置超时！您可通过点击消息界面【左下角键盘按钮】，打开【+】按钮，点击【位置】按钮，手动发送您当前位置");
			$("#layer").show();
			$("#map").hide();
			$("#span_without_map").html("获取位置超时！您可通过点击消息界面【左下角键盘按钮】，打开【+】按钮，点击【位置】按钮，手动发送您当前位置!");
			break;
		case error.PERMISSION_DENIED :
			$("#layer").show();
			$("#map").hide();
			$("#span_without_map").html("您拒绝了使用位置共享服务，查询已取消!");
			break;
		case error.POSITION_UNAVAILABLE :
			$("#layer").show();
			$("#map").hide();
			$("#span_without_map").html("获取位置超时！您可通过点击消息界面【左下角键盘按钮】，打开【+】按钮，点击【位置】按钮，手动发送您当前位置!");
			break;
	}
},
{
	maximumAge : 10000,
	timeout : 10000,
	enableHighAccuracy : true
}   );
	}
});
//纠正位置，并载入地图
function getConvertLatLng(lat, lng)
{
	$.getJSON("../gpsparse.jsp",
	{
		lat : lat,
		lng : lng
	}, function(data)
	{
		if (data.error == 0)
		{
		$("#hiddenbLng").val(data.lng);
		$("#hiddenbLat").val(data.lat);
		_lat = $("#hiddenbLat").val();
		_lng = $("#hiddenbLng").val();
		loadMap();
		}
		else
		{
		$('#preloader').hide();
		$("#layer").show();
		$("#map").hide();
		$("#span_without_map").html("获取位置信息失败!");
		}
	});
}
function loadMap()
{
	if(map1){$('#preloader').hide();$("#layer").hide();$("#map").show();}
	else if (_lat && _lng)
	{
		map1 = new AMap.Map("map",{center:new AMap.LngLat(_lng, _lat),level:14});
		$("#preloader").hide();
		AMap.event.addListener(map1,"click",function(e){if(infowindowFocus){infowindowFocus.close();$("#daohangInfo").hide();}});
		map1.plugin(["AMap.ToolBar"],function(){toolBar = new AMap.ToolBar();map1.addControl(toolBar);});
		point=new AMap.LngLat($("#hiddenbLng").val(),$("#hiddenbLat").val());
		var sicon = new AMap.Icon({image: "${pageContext.request.contextPath}/bettery/img/poi.png",size:new AMap.Size(44,44),imageOffset: new AMap.Pixel(-334, -180)});
		var marker = new AMap.Marker({
			icon : sicon, //复杂图标
			visible : true,
			position:point,
			map:map1,
			offset : {
			    x : -16,
			    y : -40
			}
		});
		marker.setMap(map1);
		addMarker();
		$('#preloader').hide();
	}
}
function addMarker()
{
	$.ajax(
	{
		url : "getMakers.do?lat=" + _lat + "&lng=" + _lng + "&t=" + (new Date()),
		dataType : "json",
		success : function(data)
		{
			if (data.success)
			{
			if (data.result.length < 1)
			{
			$("#layer").show();
			$("#map").hide();
			}
			else
			{
			$("#layer").hide();
			$("#map").show();
			findMarkflag = true;
			json = data.result;
			findMarkflag = true;
			for ( var i = 0; i < json.length; i = i + 1)
			{
			var html = "";
			var img = "../bettery/img/huiyuan.jpg";
			if (json[i].imageUrl)
			{
			img = json[i].imageUrl;
			}
			html += "<div>";
			html += "<div style='font-size:14px;'><b>" + json[i].name + "</b></div>";
			html += "<div><table style='font-size:12px;border:0px;text-align:left;'>";
			html += "<tr><td style='vertical-align: top;width:60px;'>地&nbsp;&nbsp;址：</td><td>" + json[i].address + "</td></tr>";
			html += "<tr><td >大约距离：</td><td>" + json[i].distance + "</td></tr>";
			html += "<tr><td colspan='2'><span class='new-btn-blue' ><a style='text-align:center;margin:0px;border:0;padding-left:0px;' onclick='javascript:daohang(" + i
					+ ");'>导航</a></span></div></td></tr>";
			html += "</table></div>";
			html += "</div>";
			points[i] = new AMap.LngLat(json[i].longitude, json[i].latitude);
			var marker = new AMap.Marker(
			{
				icon : new AMap.Icon(
				{ //复杂图标
							size : new AMap.Size(28, 37),//图标大小
							image : "${pageContext.request.contextPath}/bettery/img/custom_a_j.png?v=1", //大图地址
							imageOffset : new AMap.Pixel(-28 * i, 0)
						//相对于大图的取图位置
						}),
				position : points[i]
			});
			marker.setMap(map1); //在地图上添加点
			infowindows[i] = new AMap.InfoWindow(
			{
				content : html,
				size : new AMap.Size(250,125)
			});
			addEvent(marker, json[i].longitude, json[i].latitude, infowindows[i], map1, json[i].address, json[i].id, i, json[i].name, json[i].lxr, json[i].lxrTel);
			if (json[i].tuijian)
			{
			$("#hiddenmendianAddr").val(json[i].address);
			$("#hiddenMendianId").val(json[i].id);
			$("#hiddenMendianLxr").val(json[i].lxr);
			$("#hiddenMendianName").val(json[i].name);
			$("#hiddenMenDianTel").val(json[i].lxrTel);
			$("#hiddenmLng").val(json[i].longitude);
			$("#hiddenmLat").val(json[i].latitude);
			infowindows[i].open(map1, new AMap.LngLat(json[i].longitude, json[i].latitude));
			map1.panTo(new AMap.LngLat(json[i].longitude, json[i].latitude));
			infowindowFocus = infowindows[i];
			}
			}
			}
			}
			else
			{
			$('#preloader').hide();
			$("#layer").show();
			$("#map").hide();
			}
		}
	});
}
function addEvent(marker, longitude, latitude, infowindow, map1, address, id, i, name, lxr, lxrTel)
{
	AMap.event.addListener(marker, "click", function()
	{
		$("#hiddenmendianAddr").val(address);
		$("#hiddenMendianId").val(id);
		$("#hiddenMendianLxr").val(lxr);
		$("#hiddenMendianName").val(name);
		$("#hiddenMenDianTel").val(lxrTel);
		$("#hiddenmLng").val(longitude);
		$("#hiddenmLat").val(latitude);
		point2 = new AMap.LngLat(longitude, latitude);
		infowindow.open(map1, point2);
		infowindowFocus = infowindows[i];
		map1.panTo(new AMap.LngLat(longitude, latitude));
	});
}
function daohang(i)
{
	$("#daohangInfo").show();
	point2 = points[i];
	var MWalk;
	map1.plugin(["AMap.Walking"], function()
	{
		MWalk = new AMap.Walking();
		AMap.event.addListener(MWalk, "complete", driving_routeCallBack);
		MWalk.search(point, point2);
	});
}
//导航结果展示
function driving_routeCallBack(data)
{
	if (null != polyline)
	{
	polyline.hide();
	}
	if (null != extra_line1)
	{
	extra_line1.hide();
	}
	if (null != extra_line2)
	{
	extra_line2.hide();
	}
    var routeS = data.routes;
    if (null==routeS||routeS.length <= 0) {
    document.getElementById("result").innerHTML = "未查找到任何结果";
    }
    else{
         route_text="";
        for(var v =0; v< routeS.length;v++){
            //驾车步骤数
            steps = routeS[v].steps;
            var route_count = steps.length;
            //行车距离（米）
            var distance = routeS[v].distance;
            //拼接输出html
            for(var i=0 ;i< steps.length;i++){
                route_text +=  "&nbsp;"+(1+i) +"." +steps[i].instruction  + "<br/>";
            }
        }
        document.getElementById("result").innerHTML = route_text;
        drivingDrawLine();
    }  
}
//绘制驾车导航路线
function drivingDrawLine(s) {
    //起点到路线的起点 路线的终点到终点 绘制无道路部分
    var extra_path1 = new Array();
    extra_path1.push(point);
    extra_path1.push(steps[0].path[0]);
    extra_line1 = new AMap.Polyline({
        map: map1,
        path: extra_path1,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4,
        strokeStyle: "dashed",
        strokeDasharray: [10, 5]
    });
    var extra_path2 = new Array();
    var path_xy = steps[(steps.length-1)].path;
    extra_path2.push(point2);
    extra_path2.push(path_xy[(path_xy.length-1)]);
    extra_line2 = new AMap.Polyline({
        map: map1,
        path: extra_path2,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4,
        strokeStyle: "dashed",
        strokeDasharray: [10, 5]
    });
    var drawpath = new Array();
    for(var s=0; s<steps.length; s++) {
        var plength = steps[s].path.length;
        for (var p=0; p<plength; p++) {
            drawpath.push(steps[s].path[p]);
        }
    }
    polyline = new AMap.Polyline({
        map: map1,
        path: drawpath,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4,
        strokeDasharray: [10, 5]
    });
	if(infowindowFocus){infowindowFocus.close();}
	map1.panTo(point); 
}
		</script>
	</body>
</html>